<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>执行高空风险</title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../../css/preview.css" />
    <style>
      /* .mui-content>.mui-table-view:first-child {
          margin-top: 1px;
      } */
      /* .icon{
        width: 35px;
        vertical-align: middle;
        margin-right: 10px;
      } */
      /* .mui-table-view-cell:after {
          left: 45px;
          height: 1px;
      } */
      /* .mui-table-view-cell{
        padding: 11px 11px 11px 11px;
      } */
      /* .mui-table-view:after {
          left: 45px;
      } */
      /* .mui-bar{
		  background-color: #0082E6;
	  } */
      .uls {
        padding: 20px 20px;
        list-style: none;
        margin: 0;
      }

      .mui-table-view:after {
        height: 0;
      }

      .titles {
        width: 100%;
        /* font-weight: bold; */
        margin-bottom: 24px;
      }

      .img_s {
        float: left;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        background-color: #0082E6;
        border-radius: 100%;
        /* background: url(../img/word.png) no-repeat; */
        /* background-size: 100%; */
        margin: auto 0;
      }

      .bocks {
        padding: 0 5px;
      }

      .areas {
        background-color: ##F5F6F7;
        border: solid 1px #DCDCDC;
      }
      .upsign{
        overflow: hidden;
      }
      .imgss {
        float: left;
        margin-right: 10px;
      }
      
      .imgss img {
        width: 100%;
      }

      .signs {
        display: inline-block;
        width: 160px;
        height: 160px;
        /* border: solid 1px #3188FE; */
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;
        /* background-color: #D4E6FF; */
      }

      .uploads {
        display: inline-block;
        width: 160px;
        height: 160px;
        /* border-radius: 5px; */
        background: url(../img/task/dianjipaizhao.png) no-repeat;
        background-size: 100%;
        margin-bottom: 20px;
      }

      .submits {
        width: 100%;
        margin-top: 30px;
        height: 4 0px;
        border-radius: 30px;
      }

      /* .fixed-btn .mui-btn{
       width: 30%;
     } */
      .putList {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
      }

      .putList input {
        width: 80%;
      }

      .sx_s {
        color: #fff;
      }

      .sx_s span {
        font-size: 17px;
      }

      .screens {
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
      }
      .mui-scroll-wrapper{
        overflow-y:scroll
      }
      .content_ul {
        padding: 10px 20px;
        height: 240px;
        position: relative;
      }
      .wrappers {
        position: relative;
        height: 160px;
      }
      .content_ul .rowli ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border-bottom: solid 1px #DCDCDC;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
      }

      .rowli ul li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #F5F6F7;
        border: solid 1px #C2CFDA;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        /* flex-grow: 1; */
      }

      .rowli ul li.ls {
        background-color: #3188FE;
        color: #fff;
      }

      .btnli {
        text-align: center;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
      }

      .btnli .btns {
        background-color: #E7ECF1;
      }

      .btnli button {
        width: 45%;
      }

      .signs .action-delete {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
      }

      .action-delete .mui-icon {
        color: #FFFFFF;
      }

      .btn-active {
        border-style: dashed !important;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
        <h1 class="mui-title">执行高空风险</h1>
        <a class="mui-pull-right mui-bar-right" @click="getSearch">
          <img src="../img/screen.png" width="18" style="margin-right: 3px;" />
          <span> 筛选</span>
        </a>
        <!-- <a class="mui-icon mui-icon-right-nav mui-pull-right mui-icon mui-icon-gear sx_s"
          @click="getSearch"><span>筛选</span></a> -->
      </header>
      <div class="mui-content page-wrap">
        <ul class="uls page-scroll">
          <li class="lis" style="margin-bottom: 20px;">
            <div>
              {{idxs + 1}}、{{currentIndex + 1}}/{{allWp.length}} {{detail.position ? '辅助工序': '基本工序'}} 
            </div>
            <div>
              <span>工序编号：</span><span>{{detail.wpCode}}</span>
            </div>
            <div>
              <span>作业项目：</span><span>{{detail.jobProject}}</span>
            </div>
            <div>
              <span>作业方法：</span><span>{{detail.jobMethod}}</span>
            </div>
          </li>
          <li class="lis" v-for="(item,index) in projectList" :key="index" v-cloak>
            <!-- <img src="./img/xiaoxitongzhi_icon1.png" class="icon"> -->
            <div class="titles">
              <span class="img_s">{{index+1}}</span>
              <span class="bocks">{{item.refInput.name}}
                {{item.refInput.explain}}：{{inputShowText(item.refInput, dict)}}</span>
            </div>
            <div class="putList" v-if="item.refInput.typeValue == 'number'">
              <div>
                <span>{{item.value}}</span>&nbsp;{{item.refInput.unitValue}}
                <!-- <input type="number" v-model="item.value" :disabled="!isEdit" class="val1" /> -->
              </div>
            </div>
            <div v-if="item.refInput.typeValue == 'text'">
              <span>{{item.remarks}}</span>
              <!-- <textarea type="text" v-model="item.remarks" :disabled="!isEdit" class="areas"></textarea> -->
            </div>
            <div class="upsign" v-if="item.refInput.typeValue == 'img'">
              <div v-if="item.files" class="imgss">
                <span class="signs" v-for="(v,i) in item.files">
                  <img :src="v.filePath?baseUrl + v.filePath:''" :data-preview-src="v.filePath?baseUrl + v.filePath:''"
                    :data-preview-group="index" />
                  <div class="action-delete" @tap="deleteImg(v,index, i)" v-show="isEdit">
                    <span class="mui-icon mui-icon-trash"></span>
                  </div>
                </span>
              </div>
              <span class="uploads" id="headImage" @tap="addPic(index)" v-show="isEdit"></span>
            </div>
            <div v-if="item.refInput.typeValue == 'boolean'">
              <span>{{item.value}}</span>
            </div>
            <!-- <div class="putList" v-if="showValue2(item.refInput,dict)">
             <div>
               <input type="text" disabled="disabled" v-model="item.val1" class="val1"/>
             </div>
             <div>
               <input type="text" disabled="disabled" v-model="item.val2" class="val1"/>
             </div>
           </div>
           <div class="putList" v-else>
             <div>
               <input type="text" disabled="disabled" v-model="item.value" class="val1"/>
             </div>
           </div>
           <div id="sign">
              <div v-if="item.files" class="imgss">
                <span class="signs" v-for="v in item.files">
                  <img :src="v.filePath?v.filePath:''"/>
                </span>
              </div>
           </div>-->
          </li>
        </ul>
        <div class="fixed-btn">
          <!-- <button type="button" @tap="upInfo()" class="mui-btn">上一个</button> -->
          <!-- <button type="button" @tap="saveInfo()" class="mui-btn mui-btn-primary">保存</button> -->
          <button type="button" @tap="nextInfo()" class="mui-btn mui-btn-primary">下一个</button>
        </div>
        <div class="screens mui-popover mui-popover-top">
          <div class="head_s mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary "
            style="background-color: #fff;">
            <a class="mui-control-item mui-active" href="#items1"><span class="txt">全部</span></a>
            <a class="mui-control-item" href="#items2"><span class="txt">已完成</span></a>
            <a class="mui-control-item" href="#items3"><span class="txt">未完成</span></a>
          </div>
          <div class="content_ul">
            <div class="wrappers">
              <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div class="rowli mui-slider-item mui-control-content mui-active" id="items1">
                    <ul v-if="aList.length>0">
                      <li v-for="(v,index) in aList" :key="v.id" :class="[idxs == v.index? 'btn-active': '']"
                        @tap="nextInfo(v.id,v.index)">{{v.index+1}}</li>
                    </ul>
                  </div>
                  <div class="rowli mui-slider-item mui-control-content" id="items2">
                    <ul v-if="yList.length>0">
                      <li v-for="(v,index) in yList" :key="v.id" :class="[idxs == v.index? 'btn-active': '']"
                        @tap="nextInfo(v.id,v.index)">{{v.index+1}}</li>
                    </ul>
                  </div>
                  <div class="rowli mui-slider-item mui-control-content" id="items3">
                    <ul v-if="wList.length>0">
                      <li v-for="(v,index) in wList" :key="v.id" :class="[idxs == v.index? 'btn-active': '']"
                        @tap="nextInfo(v.id,v.index)">{{v.index+1}}</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="btnli">
              <button type="button" class="mui-btn btns" @tap="getSearch()">关闭</button>
              <button type="button" class="mui-btn mui-btn-primary" @tap="endSearch()">确认</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/main.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/sqlite.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/mui.zoom.js"></script>
    <script src="../../../js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init()
      mui.previewImage()
      var ids = 1;
      var idxs = 0
      var dict = {}
      var self=null
      // var dict=dict
      if (window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        self = plus.webview.currentWebview();
        console.log('idssss', self)
        // vm.form.projectTaskId = self.projectTaskId
        // vm.form.projectCategory = self.projectCategory
        ids = self.projectTaskId
        idxs = self.idxs
        vm.idxs = self.idxs
        vm.aList = self.aList
        mui.baseApp.getDict(['valueUnit', 'valueType', 'inputSymbol', 'wpTag']).then(res => {
          console.log("-------------")
          console.log(res)
          vm.dict = res
          dict = res
          vm.wpTagList = res.wpTag
        })
        getProject(ids)
        vm.getLists()
        // vm.getDetail()
      }
      var vm = new Vue({
        el: '#container',
        dicts: ['valueUnit', 'valueType', 'inputSymbol'],
        data: {
          idxs: 0,
          isEdit:false,
          projectList: [],
          dict: dict,
          aList: [],
          yList: [],
          wList: [],
          allList: [],
          wpTagList: [],
          baseUrl: mui.baseApp.serverUrl,
          detail: {},
          allWp: [], //当前基本工序加辅助工序
          currentIndex: 0, //当前基本工序加辅助工序所在索引
        },
        computed: {
          headers() {
            return function(item, i) {
              return item.value ? item.value.split(',')[i] : ''
            }
          }
        },
        created: function() {
          // getProject(ids)
          
        },
        methods: {
          saveInfo(num) {
            plus.nativeUI.showWaiting('加载中...');
            let arrys = this.projectList.map(res => {
              //  let val=''
              // // if(res.val1||res.val1){
              //  val=res.val1+','+res.val2
              //  delete res.val1
              //  delete res.val2
              // // }
              // res.value=val
              return res
            })
            console.log('xin行', arrys)
            // return false
            let parm = {
              projectTaskSensitiveId: ids,
              stage: 3,
              inputs: arrys,
            }
            mui.baseApp.httpRequst("post", "/app/api/project/execution/sensitive/execution", parm, function(data) {
              console.log('数据列表', data)
              plus.nativeUI.closeWaiting();
              mui.toast(data.msg)
              if (data.code == '0') {
                mui.toast(data.msg)
                mui.fire(self.opener(), 'back', {})
                if(!num){
                  mui.back()
                }
              } else {
                mui.toast(data.msg)
              }

            }, function() {
              plus.nativeUI.closeWaiting()
              mui.toast("保存失败")
              console.log("获取数据失败");
            })
          },
          upInfo() {
            getProject(ids)
          },
          nextInfo(vid, index) {
            if (vid) {
              idxs = index
              this.idxs = index
              ids = vid
              // this.saveInfo()
              getProject(vid)
              mui('.screens').popover('toggle');
            } else {
              if(vm.currentIndex + 1 < vm.allWp.length) { 
                vm.currentIndex++
                handleData({
                  data: vm.allWp[vm.currentIndex]
                })
                return
              }
              
              if (this.aList.length > 1 && this.aList.length > idxs + 1) {
                idxs++
                this.idxs = idxs
                ids = this.aList[idxs]['id']
                // this.saveInfo()
                getProject(ids)
              } else {
                mui.toast('没有了')
              }
            }

          },
          getLists() {
            vm.yList = []
            vm.wList = []
            this.aList.forEach((res, i) => {
              console.log('idds', res)
              res.index = i
              if (res.status == 4) {
                console.log('idds12', res)
                vm.yList.push(res);
              } else if (res.status == 0 || res.status == 1) {
                vm.wList.push(res);
              }
            })
          },
          getSearch() {
            mui('.screens').popover('toggle');
            // this.searchs=!this.searchs
          },
          endSearch() {
            let h = $(".head_s .mui-active").attr('href')
            if (h == '#items1') {
              this.allList = this.aList;
            } else if (h == '#items2') {
              this.allList = this.yList;
            } else if (h == '#items3') {
              this.allList = this.wList;
            }
            mui('.screens').popover('toggle');
          },
          // 添加图片
          addPic(index) {
            var that = this;
            plus.nativeUI.showWaiting('加载中...');
            page.imgUp(function(path) {
              console.log('compress image path: ' + path)
              mui.baseApp.upLoadFile(path, function(res) {
                plus.nativeUI.closeWaiting()
                mui.toast("上传成功")
                // this.projectList[index].push()
                // if(index==3){
                //   that.signInfo.takeImg.fileId = res.data.id
                //   that.signInfo.takeImg.filePath = res.data.fileDirectory
                // }else if(index==2){
                console.log('9999999', this.projectList)
                if (that.projectList[index].files) {
                  that.projectList[index].files.push({
                    img: path,
                    fileId: res.data.id,
                    filePath: res.data.fileDirectory
                  })
                } else {
                  that.projectList[index].files = [{
                    img: path,
                    fileId: res.data.id,
                    filePath: res.data.fileDirectory
                  }]
                }

                // }
              }, function() {
                plus.nativeUI.closeWaiting()
                console.log("获取数据失败");
              })

            });
          },
          // 删除图片
          deleteImg(item, index, i) {
            var that = this;
            mui.confirm('确定要删除此图片吗？', '提示', ['取消', '确认'], function(e) {
              console.log(e.index)
              if (e.index === 1) { // 确认
                var images = that.projectList[index].files
                images.splice(i, 1);
                // that.$set(that.checkDetails[index], 'images', images);
              } else {
                console.log('取消删除')
              }
            }, 'div');
          },
          showValue2(obj, dict) {
            if (!obj.typeSubId) {
              return false
            }
            let types = dict.id.inputSymbol[obj.typeSubId].value // 符号
            let typeSub = ['()', '[]', '(]', '[)', ')(', '][', ')[', '](']
            return typeSub.includes(types)
          },
          inputShowText(obj, dict) {
            // console.log(obj)
            let type = dict.id.valueType[obj.typeId].value // 类型
            if (type == 'text') {
              return obj.value
            } else if (type == 'img') {
              return '无'
            } else if (type == 'boolean') {
              return '是否'
            } else {
              let unit = dict.id.valueUnit[obj.unitId].value // 单位
              let symbol = dict.id.inputSymbol[obj.typeSubId].value // 符号
              let valueArr = obj.value.split(",")
              let showText = ''
              switch (symbol) {
                case '>':
                  showText = '>' + valueArr[0] + unit
                  break;
                case '≥':
                  showText = '≥' + valueArr[0] + unit
                  break;
                case '<':
                  showText = '<' + valueArr[0] + unit
                  break;
                case '≤':
                  showText = '≤' + valueArr[0] + unit
                  break;
                case '=':
                  showText = '=' + valueArr[0] + unit
                  break;
                case '!=':
                  showText = '!=' + valueArr[0] + unit
                  break;
                case '()':
                  showText = '>' + valueArr[0] + unit + '  ' + '<' + valueArr[1] + unit
                  break;
                case '[]':
                  showText = '≥' + valueArr[0] + unit + '  ' + '≤' + valueArr[1] + unit
                  break;
                case '(]':
                  showText = '>' + valueArr[0] + unit + '  ' + '≤' + valueArr[1] + unit
                  break;
                case '[)':
                  showText = '≥' + valueArr[0] + unit + '  ' + '<' + valueArr[1] + unit
                  break;
                case ')(':
                  showText = '<' + valueArr[0] + unit + '  ' + '>' + valueArr[1] + unit
                  break;
                case '][':
                  showText = '≤' + valueArr[0] + unit + '  ' + '≥' + valueArr[1] + unit
                  break;
                case ')[':
                  showText = '<' + valueArr[0] + unit + '  ' + '≥' + valueArr[1] + unit
                  break;
                case '](':
                  showText = '≤' + valueArr[0] + unit + '  ' + '>' + valueArr[1] + unit
                  break;
                default:
                  showText = obj.value + unit
                  break
              }
              return showText
            }
          }
        },
      });
      (function($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration
        });
      })(mui);
      function getProject(ids, type) {
        plus.nativeUI.showWaiting('加载中...');
        mui.baseApp.httpRequst("get", "/app/api/project/execution/sensitive/detail/" + ids, null, function(data) {
          console.log('数据列表', data)
          plus.nativeUI.closeWaiting();
          let subWps = data.data.subWps || []
          let prefix = []; // 前置
          let suffix = []; // 后置
          subWps.forEach(item => {
            item.isReturn = data.data.isReturn 
            if(item.position == 1) {
              prefix.push(item)
            } else {
              suffix.push(item)
            }
          })
          delete data.data.subWps
          vm.allWp = prefix.concat([data.data]).concat(suffix)
          if(type != 'cancel') { // 取消保持原来的
            vm.currentIndex = 0
          }
          
          handleData({
            data: vm.allWp[vm.currentIndex]
          }) 
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      
      function handleData(data) {
        vm.projectList = data.data.inputs
        vm.detail = data.data
      }
      $(document).ready(function() {
        let height = document.documentElement.clientHeight
        //防止软键盘弹出底部按钮顶上来
        $(".mui-content").css('height', height + 'px')
      })
      $("#sign").click(function() {
        // mui.baseApp.openWindow('../common/sign.html')
      })
    </script>
  </body>
</html>
